<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax搜索提示 星期八 mvc php asp javascript</title>
<meta name="author" content="星期八 mvc php asp javascript" />
<meta name="description" content="星期八" />
<meta name="keywords" content="mvc php asp javascript" />
<link href="../css/common.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
var lastindex=-1;
var flag=false;
var listlength=0;
function StringBuffer(){this.data=[];} 
StringBuffer.prototype.append=function(){this.data.push(arguments[0]);return this;} 
StringBuffer.prototype.tostring=function(){return this.data.join("");} 
String.prototype.Trim = function(){return this.replace(/(^\s*)|(\s*$)/g, "");}
function hiddensearch()
{
 $('rlist').style.display="none";
 $('rFrame').style.display="none";
}
function showsearch(num)
{
  $('rlist').style.display='';
  $('rFrame').style.display='';
  $('rlist').style.height=num*20+num+'px';
  $('rFrame').style.height=num*20+num+'px';
}
function getposition(element,offset)
{
    var c=0;
    while(element)
    {
        c+=element[offset];
        element=element.offsetParent
    }
    return c;
}
function createlist()
{
	var listDiv=document.createElement("div");
	listDiv.id="rlist";        
	listDiv.style.zIndex="2";
	listDiv.style.position="absolute"; 
	listDiv.style.border="solid 1px #000000";
	listDiv.style.backgroundColor="#FFFFFF";
	listDiv.style.display="none";	
	listDiv.style.width=$('keyword').clientWidth+"px";
	listDiv.style.left=getposition($('keyword'),'offsetLeft')+1.5+"px";
	listDiv.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";
	
	var listFrame=document.createElement("iframe");
	listFrame.id="rFrame";
	listFrame.style.zIndex="1";
	listFrame.style.position="absolute";
	listFrame.style.border="0";
	listFrame.style.display="none";	
	listFrame.style.width=$('keyword').clientWidth+"px";
	listFrame.style.left=getposition($('keyword'),'offsetLeft')+1+"px";
	listFrame.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";
	document.body.appendChild(listDiv);       
	document.body.appendChild(listFrame);
}
function setstyle(element,classname)
{
	switch (classname)
    {
     case 'm':
	      element.style.fontSize="12px";
		  element.style.fontFamily="arial,sans-serif";
		  element.style.backgroundColor="#3366cc";
		  element.style.color="black";
		  element.style.width=$('keyword').clientWidth-2+"px";
		  element.style.height="20px";
          element.style.padding="1px 0px 0px 2px";
          if(element.displaySpan)element.displaySpan.style.color="white"
		  break;
     case 'd':
	      element.style.fontSize="12px";
		  element.style.fontFamily="arial,sans-serif";
		  element.style.backgroundColor="white";
		  element.style.color="black";
		  element.style.width=$('keyword').clientWidth-2+"px";
		  element.style.height="20px";
          element.style.padding="1px 0px 0px 2px";
          if(element.displaySpan)element.displaySpan.style.color="green"
		  break;
	 case 't':
	      element.style.width="80%";
		  if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)element.style.cssFloat="left";
		  else element.style.styleFloat="left";
		  element.style.whiteSpace="nowrap";
		  element.style.overflow="hidden";
		  element.style.textOverflow="ellipsis";
		  element.style.fontSize="12px";
		  element.style.textAlign="left";
		  break;
	 case 'h':
	      element.style.width="20%";
		  if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)element.style.cssFloat="right";
		  else element.style.styleFloat="right";
		  element.style.textAlign="right";
		  element.style.color="green";
		  break;
    }
}
function focusitem(index)
{
  if($('item'+lastindex)!=null)setstyle($('item'+lastindex),'d');
  if($('item'+index)!=null)
  {
   setstyle($('item'+index), 'm');
   lastindex=index;
  }
  else $("keyword").focus();
}
function searchclick(index)
{
  $("keyword").value=$('title'+index).innerHTML;
  flag=true;
}
function searchkeydown(e)
{
 if($('rlist').innerHTML=='')return;
  var keycode=(window.navigator.appName=="Microsoft Internet Explorer")?event.keyCode:e.which;
  //down
  if(keycode==40)
  {
	if(lastindex==-1||lastindex==listlength-1)
	{
	 focusitem(0);
	 searchclick(0);
	}
	else{
	 focusitem(lastindex+1);
	 searchclick(lastindex+1);
	}
  }
 if(keycode==38)
 {
	if(lastindex==-1)
	{
	 focusitem(0);
	 searchclick(0);
	}
	else{
	 focusitem(lastindex-1);
	 searchclick(lastindex-1);
	}
 }
 if(keycode==13)
 {
  focusitem(lastindex);
  $("keyword").value=$('title'+lastindex).innerText;
 }	   
 if(keycode==46||keycode==8){flag=false;ajaxsearch($F('keyword').substring(0,$F('keyword').length-1).Trim());}
}
function showresult(xmlhttp)
{
	var result=unescape(xmlhttp.responseText);
	if(result!=''){
	   var resultstring=new StringBuffer();
       var title=result.split('$')[0];
       var hits=result.split('$')[1];
	   for(var i=0;i<title.split('|').length;i++)
	   {
		  resultstring.append('<div id="item'+i+'" onmousemove="focusitem('+i+')" onmousedown="searchclick('+i+')">');
		  resultstring.append('<span id=title'+i+'>');
		  resultstring.append(title.split('|')[i]);
		  resultstring.append('</span>');
		  resultstring.append('<span id=hits'+i+'>');
		  resultstring.append(hits.split('|')[i]);
		  resultstring.append('</span>');
		  resultstring.append('</div>');
	   }
	   $('rlist').innerHTML=resultstring.tostring();
	   for(var j=0;j<title.split('|').length;j++)
	   {
	    setstyle($('item'+j),'d');
		$('item'+j).displaySpan=$('hits'+j);
	    setstyle($('title'+j),'t');
	    setstyle($('hits'+j),'h');
	   }
	   showsearch(title.split('|').length);
	   listlength=title.split('|').length;
	   lastindex=-1;
	}
	else hiddensearch();
}
function ajaxsearch(value)
{
	new Ajax.Request('search.php',{method:"get",parameters:"action=do&keyword="+escape(value),onComplete:showresult});
}
function main()
{
	$('keyword').className=$('keyword').className=='inputblue'?'inputfocus':'inputblue';
	if($F('keyword').Trim()=='')hiddensearch();
	else
	{
      if($F('keyword')!=''&&flag==false)ajaxsearch($F('keyword').Trim());
	  if(listlength!=0)$('keyword').onkeydown=searchkeydown;
	  else hiddensearch();
	}
}
function oninit()
{
	$('keyword').autocomplete="off";
	$('keyword').onfocus=main;
	$('keyword').onkeyup=main;
	$('keyword').onblur=hiddensearch; 
	createlist();
}
Event.observe(window,'load',oninit);
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<div style=" margin:30px auto;width:95%; height:30px; line-height:30px; border:1px solid #66CCFF; padding:5px; font-size:16px;">
     　<b>输入搜索关键字</b>
    <input name="keyword" type="text" class="inputblue" id="keyword" maxlength="20" style="width:300px;" /> 
    请输入<a href="http://www.xqbar.com" target="_blank">http://www.xqbar.com</a> 中的任一字符</div>
</form>
<br />
<center>
作者：星期八<br />
qq：174171262<br />
email：wxddong@163.com  <a href="http://www.ljzxzxl.com/test.php">http://www.ljzxzxl.com/test.php</a>
<script language="javascript" type="text/javascript" src="http://js.users.51.la/1463674.js"></script>
</center>
</body>
</html>
